<template>
    <div class="b-content chapters" >
      <ul :class="cls" v-if="!chapterList[0] || !chapterList[0].childList">
          <li class="flex between item-center no-child" v-for="item of chapterList" :key="item.id">
              <div style="line-height: 15px;"  >
                  <span v-if="item.course_type == 3" class="iconfont">&#xe695;</span>
                  <span v-else-if="item.course_type == 2" class="iconfont">&#xe687;</span>
                  <span v-else-if="item.course_type == 1" class="iconfont">&#xe616;</span>
                  <span style="margin:  0 20px 0 10px;" 
                    :class="cls === 'black' && item.id == chapter.id && 'current'"
                    @click="changeChapter(item)">
                        {{ item.name }}
                    </span>
                  <span class="tag-span">
                    <el-tag  size="mini" v-if="'1' == item.is_complete" type="success" plain>已完成</el-tag>
                    <el-tag   size="mini" v-else-if="'0' == item.is_complete" type="warning" plain>进行中</el-tag>
                    <el-tag   size="mini" v-else type="info" plain>未开始</el-tag>
                  </span>
              </div>
              <el-button v-if="cls === 'white'" @click="startStudy(item)" class="start-study" type="primary" size="small">开始学习</el-button>
          </li>
      </ul>
      <ul :class="cls" v-if="chapterList[0] && chapterList[0].childList && chapterList[0].childList.length">
          <li>
              <el-collapse v-model="activeNames" @change="handleChange">
                  <el-collapse-item
                  v-for="item of chapterList" :key="item.id"
                  :title="item.name" :name="item.id">
                      <div class="has-child flex between item-center"  v-for="child of item.childList" :key="child.id">
                          <div>
                              <span v-if="child.course_type == 3" class="iconfont">&#xe695;</span>
                              <span v-else-if="child.course_type == 2" class="iconfont">&#xe687;</span>
                              <span v-else-if="child.course_type == 1" class="iconfont">&#xe616;</span>
                              <span style="margin:  0 20px 0 10px;" 
                                :class="cls === 'black' && item.id == chapter.id && 'current'"
                                @click="changeChapter(child)">{{ child.name }}</span>
                              <span class="tag-span">
                                <el-tag   size="mini" v-if="'1' == child.is_complete" type="success" plain>已完成</el-tag>
                                <el-tag  size="mini"  v-else-if="'0' == child.is_complete" type="warning" plain>进行中</el-tag>
                                <el-tag   size="mini" v-else type="info" plain>未开始</el-tag>
                              </span>
                          </div>
                          <el-button v-if="cls === 'white'" @click="startStudy(child)" class="start-study" type="primary" size="small">开始学习</el-button>
                      </div>
                      
                  </el-collapse-item>
              </el-collapse>
          </li>
      </ul>
  </div>
  </template>
  
  <script>
  export default {
      props: {
          chapterList: {
              type: Array,
              require: true,
              default: () => {
                  return []
              }
          },
          chapter: {
            type: Object,
            require: false,
            default: () => {
                return {}
            }
          },
          course: {
              type: Object,
              require: true
          },
          cls: {
            type: String,
            require: false,
            default: 'white'
          }
      },
      data() {
          return {
              activeNames: []
          }
      },
      mounted() {
          console.log(this.chapterList)
      },  
      methods: {
          // 点击开始学习按钮
          startStudy(chapter) {
              this.$router.push(`/study/${this.course.id}?cid=${chapter.id}`)
          },
          handleChange() {
  
          },
          changeChapter(chapter) {
            if (this.cls === 'black') {
                this.$emit('changeChapter', chapter)
            }
            // this.$router.push(`/study/${this.course.id}?cid=${chapter.id}`)
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .current {
    color: red;
  }
  .chapters {
  .white .no-child,
  .white .has-child {
        padding: 10px;
        height: 50px;
        &:hover {
            background: rgba($color: red, $alpha: .1);
        }
        &:hover div span {
            color: var(--color-primary);
        }
  
        &:hover .start-study {
            display: block;
        }
        .start-study {
            display: none;
        }
      }
      /deep/ .el-collapse-item__header,
        /deep/ .el-collapse-item__header.is-active {

            border: 1px solid #ccc;
            padding: 5px 10px;
            font-size: 18px;
        }
        /deep/ .el-collapse-item__wrap {
            border: 1px solid #ccc;
            border-top: transparent;
        }
        /deep/ .el-collapse-item__content {
         padding-bottom: 0;
        }
  }
  .black {
    >li {
        padding: 10px 0;
        cursor: pointer;
        &:hover >div>span {
            color: #fff;
        }
    }   
    /deep/ .el-collapse,
    /deep/ .el-collapse-item__header,
    /deep/ .el-collapse-item__wrap {
        background-color: transparent;
        border: none !important;
        color: #ccc;
    }
    .tag-span {
        display: none;
    }
   
    .has-child {
        padding: 10px;
    }
  }

 

  </style>